<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动态组件之Tab切换keep-alive</title>
  <style lang="">
    .tab-button {
      padding: 6px 10px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border: 1px solid #ccc;
      cursor: pointer;
      background: #f0f0f0;
      margin-bottom: -1px;
      margin-right: -1px;
    }
    .tab-button:hover {
      background: #e0e0e0;
    }
    .tab-button.active {
      background: #e0e0e0;
    }
    .tab {
      border: 1px solid #ccc;
      padding: 10px;
    }
    .posts-tab {
      display: flex;
    }
    .posts-sidebar {
      max-width: 40vw;
      margin: 0;
      padding: 0 10px 0 0;
      list-style-type: none;
      border-right: 1px solid #ccc;
    }
    .posts-sidebar li {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      cursor: pointer;
    }
    .posts-sidebar li:hover {
      background: #eee;
    }
    .posts-sidebar li.selected {
      background: lightblue;
    }
    .selected-post-container {
      padding-left: 10px;
    }
    .selected-post > :first-child {
      margin-top: 0;
      padding-top: 0;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="tab-demo" class="demo">
    <button
      v-for="tab in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab}]"
      @click="currentTab = tab"
    >{{ tab }}</button>
    <keep-alive>
      <component
        :is="currentTabComponent"
        class="tab">
      </component>
    </keep-alive>
  </div>
  
  <script>
    Vue.component('tab-posts', {
      data: function () {
        return {
          posts: [
            {
              id: 1,
              title: 'html',
              content: 'HTML权威指南'
            },
            {
              id: 2,
              title: 'css',
              content: 'CSS权威指南'
            },
            {
              id: 3,
              title: 'JavaScript',
              content: 'JavaScript高级程序设计'
            }
          ],
          selectedPost: null
        }
      },
      template: `
        <div class="posts-tab">
          <ul class="posts-sidebar">
            <li
              v-for="post in posts"
              v-bind:key="post.id"
              v-bind:class="{ selected: post === selectedPost }"
              v-on:click="selectedPost = post"
            >
              {{ post.title }}
            </li>
          </ul>
          <div class="selected-post-container">
            <div 
              v-if="selectedPost"
              class="selected-post"
            >
              <h3>{{ selectedPost.title }}</h3>
              <div v-html="selectedPost.content"></div>
            </div>
            <strong v-else>
              Click on a blog title to the left to view it.
            </strong>
          </div>
        </div>
      `
    })
    Vue.component('tab-archive', {
      template: '<div>Archive</div>'
    })

    new Vue({
      el: '#tab-demo',
      data: {
        currentTab: 'Posts',
        tabs: ['Posts', 'Archive']
      },
      computed: {
        currentTabComponent: function () {
          return 'tab-' + this.currentTab.toLowerCase()
        }
      }
    })
  </script>
</html>